<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 需求管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-search" @click="getData">刷新</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header">
                 <el-table-column label="地区">
                     <template slot-scope="scope">
                        {{scope.row.cityName+','+scope.row.areaName}}
                    </template>
                 </el-table-column>
                 <el-table-column prop="creator" label="用户"></el-table-column>
                 <el-table-column prop="brand" label="品牌"></el-table-column>
                 <el-table-column prop="material" label="材质"></el-table-column>
                 <el-table-column prop="model" label="型号"></el-table-column>
                 <el-table-column prop="remark" label="备注"></el-table-column>
                 <el-table-column label="图像(查看大图)" align="center" width="200">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.imgList[0]"
                            :preview-src-list="scope.row.imgList"
                        ></el-image>
                    </template>
                </el-table-column>
                 <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                         <el-button
                            type="text"
                            icon="el-icon-zoom-in"
                            class="mid"
                            @click="handleShow(scope.$index, scope.row)"
                        >查看</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red mid"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="tableData.length"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
         <!-- 查看 -->
        <el-dialog title="需求详情" :visible.sync="showVisible" width="900px" :close-on-click-modal="false">
            <el-table
               :data="showTable"
               stripe
               style="width: 100%">
               <el-table-column
                 prop="brand"
                 label="品牌">
               </el-table-column>
               <el-table-column
                 prop="material"
                 label="材质">
               </el-table-column>
               <el-table-column
                 prop="model"
                 label="型号">
               </el-table-column>
               <el-table-column
                 prop="price"
                 width="120"
                 label="价格">
               </el-table-column>
           </el-table> 
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'demand',
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 10
            },
            title:'',
            tableData: [],
            showVisible:false,
            showTable:[],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            this.$http.postHead('hgz/demand/queryListWithPage',this.query).then(res =>{
                if(res.status){
                   for(var i=0;i<res.data.list.length;i++){
                       var imgPath =  res.data.list[i].imgPath;
                       var imgList2 = res.data.list[i].imgPath.split(';');
                       var imgList = [];
                       for(var j=0;j<imgList2.length;j++){
                           if(imgList2[j]!=''&&imgList2[j].length>5){
                             imgList.push(imgList2[j])  
                           }
                       }
                       res.data.list[i].imgList = imgList;
                   }
                   this.tableData = res.data.list;
                }
            })
        },
        handleShow(index, row){
            //hgz/demand/queryPriceById
            this.$http.postHead(`hgz/demand/queryPriceById/${row.id}`).then(res =>{
                if(res.status){
                    this.showVisible = true;
                    this.showTable = res.data;
                }
            })
        },
        handleDelete(index, row){
            this.$confirm('此操作将永久删除该需求, 是否继续?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let id = row.id;
                this.$http.postHead(`hgz/demand/deleteById/${id}`)
                .then(res =>{
                    if(res.status){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });   
                    }
                }).catch(() =>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    }); 
                })
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.orange {
    color: orange;
}
.mid{
    font-size: 16px;;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
